<template>
  <div>
    <div class="container">
      <div class="category-detail">
        <!-- 优化博客推荐部分 -->
        <div class="commend">博客推荐</div>
        <div class="blog-list">
          <div v-for="item in blogList" :key="item.id">
            <SpecialItem
                :title="item.title"
                :cover="item.cover"
                :summary="item.description"
                :writer="item.writer"
                :categoryName="item.categoryName"
                :time="item.time"
                :blogId="item.blogId.toString()"
                :browse="item.browse"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import axios from 'axios';
import {useRoute} from 'vue-router';

const route = useRoute();
const blogList = ref([]);
const jwtToken = localStorage.getItem('jwtToken');

const axiosInstance = axios.create({
  headers: {
    'Token': jwtToken,
    'satoken': localStorage.getItem('tokenValue')
  }
});

// 获取博客
axiosInstance.get('http://localhost:8080/showblog')
    .then(response => {
      blogList.value = response.data.data;
      // 根据每个数据对象的 'browse' 属性进行排序，从大到小
      blogList.value.sort((a, b) => b.browse - a.browse);
      console.log(response.data.data);
    })
    .catch(error => {
      console.error('请求失败:', error);
    });
</script>

<style lang="scss">
.category-detail {
  flex: 1;

  /* 修改博客推荐标题样式 */
  .commend {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(45deg, #ff9a8b, #ff6a88, #d16ba5); /* 渐变背景 */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.05); /* 增加悬浮放大效果 */
    }
  }

  .category-item-list {
    width: 100%;

    .item-inner {
      border: none;
    }

    background: #fff;
    font-size: 15px;
  }

  .blog-list {
    margin-top: 20px;
    background: #fff;
    padding: 10px;
  }
}
</style>
